<template>
  <div class="p-4" style="background-color: white;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <!--      面包屑-->
    <div class="border-bottom pb-2 mb-4" style="">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/KaoYan_Frame/Information' }">考研资讯</el-breadcrumb-item>
        <el-breadcrumb-item>其他</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="other_info" v-if="pee_info.length>0">
      <div class="pee pb-3" v-for="(pee) in pee_info" :key=pee.pee_id>
      <ul class="list-unstyled">
        <li class="media">
          <img :src="'/api/storage/pee_img/other_info_img.jpg'" class="mr-3" alt="..." style="height: 100px;width: 100px">
          <div class="media-body">
            <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:pee.pee_id}}">
              <a class="mb-1" href="javascript:void(0);">{{pee.pee_title}}</a>
            </router-link>
            <div class="content pt-2">
              <p style="color: #6b6e71;font-size: 15px;">{{pee.pee_content}}</p>
            </div>
            <div class="" style="text-align: right;">
              <p style="color: #6b6e71;font-size: 15px;">{{pee.pee_release_time}}</p>
            </div>
          </div>
        </li>
        <div class="dropdown-divider"></div>
      </ul>
    </div>
    </div>
    <div class="noFile" v-else>
      <img :src="imgs.noInfo" alt="...">
      <h2>{{this.nullContainer}}</h2>
    </div>
    <div class="block center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2,5,10]"
          :page-size="param.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        <!--          :background="'whitesmoke'" -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import noInfo from '@/assets/noFile.png'
import {getAllPeeInfo} from "@/api/Pee";

export default {
  name: "Other_Info",
  components:{
  },
  data(){
    return{
      nullContainer:"暂无数据~",
      param:{
        key:'',
        page:1,
        limit:10,
      },
      pee_category:5,
      currentPage:1,
      total:0,
      imgs:{
        noInfo
      },
      pee_info:[],
    }
  },
  methods:{
    // 获取所有信息
    init(){

      getAllPeeInfo({
        page:this.param.page,
        limit:this.param.limit,
        pee_category:this.pee_category
      }).then(res=>{
          this.pee_info=res.data.data;
          this.total=res.data.total;
      });


    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.limit=val;
      this.init();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.page=val;
      this.init();
    },
  },
  created() {
    let _this = this;

    _this.init();
  },
  mounted() {

  },
}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
/*多行显示省略号，数字5为超出5行显示*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  letter-spacing:3px;
}
/*新闻标题*/
.media-body a{
  font-size: 20px;
  color: black;
}
.media-body a:hover{
  color: #2a7f61;
}
/*无数据图*/
.noFile{
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
</style>
